<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins',sans-serif;
    }
    body{
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #2f363e;
    }
    .container{
      position: relative;
      background-color: #2f363e;
      border-top-left-radius: 255px;
      border-top-right-radius: 255px;
      box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.75),
      10px 10px 70px rgba(0, 0, 0, 0.25),
      /* 简化top、right、bottom、left写法 */
      inset  5px 5px 10px rgba(0 ,0,0,0.5),
      inset  5px 5px 20px rgba(255 ,255,255,0.2),
      inset  -5px -5px 15px rgba(0 ,0,0,0.75);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;


    }
    .clock{
      position: relative;
      width: 450px;
      height: 450px;
      background-color: #2f363e;
      border-radius: 50%;
      box-shadow: 10px 50px 70px rgba(0, 0, 0, 0.25),
      /* 简化top、right、bottom、left写法 */
      inset  5px 5px 10px rgba(0 ,0,0,0.5),
      inset  5px 5px 20px rgba(255 ,255,255,0.2),
      inset  -5px -5px 15px rgba(0 ,0,0,0.75);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 30px;
    }
    .clock::before{
      content: '';
      position: absolute;
      width: 8px;
      height: 8px;background-color: #2f363e;
      border: 3px solid #fff;
      border-radius: 50%;
      z-index: 10000;

    }
    .clock span{
      position: absolute;
      inset: 20px;
      color: #fff;
      text-align: center;
      /* 调整数字位置，360/12=30 */
      transform: rotate(calc(30deg*var(--i)));
    }
    .clock span b{
      font-size: 2em;
      opacity: 0.25;
      font-weight: 600;
      display: inline-block;
      /* 摆正数字 */
      transform: rotate(calc(-30deg * var(--i)));
    }
    .circle{
      position: absolute;
      width: 300px;
      height: 300px;
      border: 2px solid rgba(0, 0, 0, 0.25);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      z-index: 10;
    }
    .circle i{
      position: absolute;
      width: 6px;
      height: 50%;
      background-color: var(--clr);
      opacity: 0.75;
      /* 旋转的基准 */
      transform-origin: bottom;
      transform: scaleY(0.5);
    }
    .circle:nth-child(1) i{
      width: 2px;
    }
    .circle:nth-child(2) i{
      width: 6px;
    }
    .circle2{
      width: 240px;
      height: 240px;
      z-index: 9;
    }
    .circle3{
      width: 180px;
      height: 180px;
      z-index: 8;
    }
    .circle::before{
      content: '';
      position: absolute;
      top: -8.5px;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background:var(--clr);
      box-shadow: 0 0 20px var(--clr),
      0 0 60px var(--clr);
    }
    #time{
      margin-bottom: 40px;
      display: flex;
      padding: 10px 20px;
      font-size: 2em;
      font-weight: 600;
      /* border: 2px solid rgba(0,0,0,0.5); */
      border-radius: 40px;
      box-shadow: 5px 5px 10px rgba(0 ,0,0,0.5),
      inset 5px 5px 20px rgba(255, 255, 255, 0.2),
      inset -5px -5px 15px rgba(0 ,0,0,0.75);
    }
    #time div{
      position: relative;
      width: 60px;
      text-align:center;
      font-weight: 500;
      color: var(--clr);
    }
    #time div:nth-child(1)::after,
    #time div:nth-child(2)::after{
      content:':';
      position: absolute;
      right: -4px;
    }
    #time div:last-child{
      font-size: 0.5em;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
    }
    #time div:nth-child(2)::after{
      animation: animate 1s steps(1) infinite;
    }
    @keyframes animate{
      0%{
        opacity: 1;
      }
      50%{
        opacity: 0;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="clock">
      <div  class="circle" style="--clr:#04fc43;" id="sc"><i></i></div>
      <div  class="circle circle2" style="--clr:#fee800;" id="mn"><i></i></div>
      <div class="circle circle3" style="--clr:#ff2972;" id="hr" ><i></i></div>

      <span style="--i:1"><b>1</b></span>
      <span style="--i:2"><b>2</b></span>
      <span style="--i:3"><b>3</b></span>
      <span style="--i:4"><b>4</b></span>
      <span style="--i:5"><b>5</b></span>
      <span style="--i:6"><b>6</b></span>
      <span style="--i:7"><b>7</b></span>
      <span style="--i:8"><b>8</b></span>
      <span style="--i:9"><b>9</b></span>
      <span style="--i:10"><b>10</b></span>
      <span style="--i:11"><b>11</b></span>
      <span style="--i:12"><b>12</b></span>
    </div>
    <div id="time">
      <div id="hours" style="--clr:#ff2972;">00</div>
      <div id="minutes" style="--clr:#fee800;">00</div>
      <div id="seconds" style="--clr:#04fc43;">00</div>
      <div id="ampm" >Am</div>

    </div>
  </div>
  <script>
    let hr=document.querySelector('#hr')
    let mn=document.querySelector('#mn')
    let sc=document.querySelector('#sc')
    setInterval(()=>{
      let day=new Date()
      let hh=day.getHours() * 30
      let mm=day.getMinutes() * 6
      let ss=day.getSeconds() * 6
      
      hr.style.transform=`rotateZ(${hh+(mm/12)}deg)`
      mn.style.transform=`rotateZ(${mm}deg)`
      sc.style.transform=`rotateZ(${ss}deg)`

      let hours=document.getElementById('hours')
      let minutes=document.getElementById('minutes')
      let seconds=document.getElementById('seconds')
      let ampm=document.getElementById('ampm')

      let h =day.getHours()
      let m=day.getMinutes()
      let s=day.getSeconds()
      let am=h>=12?'PM':'AM'

      h=(h<10)?'0'+h:h
      m=(m<10)?'0'+m:m
      s=(s<10)?'0'+s:s

      hours.innerHTML=h
      minutes.innerHTML=m
      seconds.innerHTML=s
      ampm.innerHTML=am

    })



  </script>
</body>
</html>